<template>
  <div class="my-home">
    <!-- <h1>主页</h1> -->
    <div class="home-main">
      <router-view></router-view>
    </div>
    <!-- tabbar start -->
    <div class="home-tabbar">
      <van-tabbar
        v-model="active"
        :active-color="icon.active"
        :inactive-color="icon.inactive"
        route
      >
        <van-tabbar-item to="/home/movies">
          <span>电影</span>
          <template #icon="props" >
            <svg
              t="1650597920128"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="2267"
              width="16"
              height="16"
            >
              <path
                d="M844.832 885.344c-30.485333-20.714667-77.781333-18.965333-144.053333 9.386667A425.024 425.024 0 0 1 512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667a425.013333 425.013333 0 0 1-44.405334 189.717333 32 32 0 0 1-57.301333-28.490666A361.013333 361.013333 0 0 0 874.666667 512c0-200.298667-162.368-362.666667-362.666667-362.666667S149.333333 311.701333 149.333333 512s162.368 362.666667 362.666667 362.666667c56.704 0 111.488-13.013333 161.12-37.653334l1.6-0.746666c84.746667-36.437333 154.176-39.125333 206.08-3.861334a32 32 0 1 1-35.968 52.938667zM512 416a64 64 0 1 1 0-128 64 64 0 0 1 0 128z m160 160a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM512 736a64 64 0 1 1 0-128 64 64 0 0 1 0 128zM352 576a64 64 0 1 1 0-128 64 64 0 0 1 0 128z"
                p-id="2268"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/theaters">
          <span>影院</span>
          <template #icon="props">
            <svg
              t="1650607835180"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4357"
              width="16"
              height="16"
            >
              <path
                d="M885.333333 874.666667h-149.696C857.237333 799.402667 938.666667 665.194667 938.666667 512c0-235.264-191.402667-426.666667-426.666667-426.666667S85.333333 276.736 85.333333 512c0 229.205333 181.802667 416.234667 408.704 425.749333 2.368 0.554667 4.778667 0.917333 7.296 0.917334h384a32 32 0 1 0 0-64zM149.333333 512c0-199.978667 162.688-362.666667 362.666667-362.666667s362.666667 162.688 362.666667 362.666667-162.688 362.666667-362.666667 362.666667S149.333333 711.978667 149.333333 512z"
                p-id="4358"
                fill="#bfbfbf"
              ></path>
              <path
                d="M413.952 429.034667a117.461333 117.461333 0 0 0-165.930667 0 117.44 117.44 0 0 0 0 165.930666 116.949333 116.949333 0 0 0 82.965334 34.304 117.034667 117.034667 0 0 0 82.986666-34.304 117.504 117.504 0 0 0-0.021333-165.930666z m-45.248 120.682666a53.397333 53.397333 0 0 1-75.434667 0 53.397333 53.397333 0 0 1 0-75.434666 53.162667 53.162667 0 0 1 37.717334-15.594667c13.653333 0 27.306667 5.205333 37.717333 15.594667a53.44 53.44 0 0 1 0 75.434666zM512 448.32c31.36 0 60.821333-12.202667 82.965333-34.346667a116.565333 116.565333 0 0 0 34.368-82.986666c0-31.338667-12.202667-60.8-34.368-82.965334-22.144-22.165333-51.626667-34.368-82.965333-34.368s-60.8 12.202667-82.965333 34.368a117.44 117.44 0 0 0 0 165.930667A116.565333 116.565333 0 0 0 512 448.32z m-37.717333-155.050667c10.090667-10.069333 23.488-15.616 37.717333-15.616s27.626667 5.546667 37.717333 15.616c10.090667 10.069333 15.616 23.466667 15.616 37.696 0 14.250667-5.546667 27.648-15.616 37.717334-20.16 20.138667-55.274667 20.138667-75.434666 0a53.376 53.376 0 0 1 0-75.413334zM594.965333 776a116.565333 116.565333 0 0 0 34.368-82.965333 116.522667 116.522667 0 0 0-34.368-82.965334c-22.144-22.165333-51.626667-34.346667-82.965333-34.346666s-60.8 12.202667-82.965333 34.368a117.44 117.44 0 0 0 0 165.930666A116.565333 116.565333 0 0 0 512 810.389333a116.778667 116.778667 0 0 0 82.965333-34.389333z m-120.682666-45.269333A53.376 53.376 0 0 1 512 639.701333c14.250667 0 27.626667 5.546667 37.717333 15.616 10.090667 10.069333 15.616 23.466667 15.616 37.717334 0 14.229333-5.546667 27.626667-15.616 37.717333-20.181333 20.117333-55.274667 20.117333-75.434666-0.021333zM610.069333 594.965333a116.48 116.48 0 0 0 82.965334 34.368 116.48 116.48 0 0 0 82.965333-34.368 117.44 117.44 0 0 0 0-165.930666 116.522667 116.522667 0 0 0-82.965333-34.368 116.48 116.48 0 0 0-82.965334 34.368 117.44 117.44 0 0 0 0 165.930666z m45.248-120.682666c10.090667-10.069333 23.466667-15.616 37.717334-15.616s27.626667 5.546667 37.717333 15.616a53.397333 53.397333 0 0 1 0 75.434666c-20.16 20.138667-55.253333 20.138667-75.413333 0a53.376 53.376 0 0 1-0.021334-75.434666z"
                p-id="4359"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
        <van-tabbar-item to="/home/profile">
          <span>我的</span>
          <template #icon="props">
            <svg
              t="1650607780561"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3779"
              width="16"
              height="16"
            >
              <path
                d="M512 563.2c-127.9744 0-230.4-115.2512-230.4-256s102.4256-256 230.4-256 230.4 115.2512 230.4 256-102.4256 256-230.4 256z m0-51.2c98.2528 0 179.2-91.0592 179.2-204.8s-80.9472-204.8-179.2-204.8-179.2 91.0592-179.2 204.8 80.9472 204.8 179.2 204.8zM128 793.6a179.2 179.2 0 0 1 179.3792-179.2h409.2416C815.6416 614.4 896 694.7328 896 793.6a179.2 179.2 0 0 1-179.3792 179.2H307.3792C208.3584 972.8 128 892.4672 128 793.6z m51.2 0c0 70.5792 57.4464 128 128.1792 128h409.2416A128 128 0 0 0 844.8 793.6c0-70.5792-57.4464-128-128.1792-128H307.3792A128 128 0 0 0 179.2 793.6z"
                p-id="3780"
                :fill="props.active ? icon.active : icon.inactive"
              ></path>
            </svg>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- tabbar end -->
  </div>
</template>

<script>
// @ is an alias to /src
import Vue from "vue";
import { Tabbar, TabbarItem } from "vant";

Vue.use(Tabbar);
Vue.use(TabbarItem);
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      active: 0,
      icon: {
        active: "#be3634",
        inactive: "#535353",
      },
    };
  },
};
</script>

<style lang="less">
.my-home {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  height: 100%;
  .home-main {
    flex: 1;
  }

  .home-tabbar {
    height: 0.5rem;
  }
}
</style>
